<template>
  <div class="print-page">
    <div>
      <div class="project-header">
        <div class="tools-bar">
          <h3>打印预览</h3>
          <div class="select-wrapper">
            <div class="select-btn">
              <el-radio-group v-model="radio" @input="radioChange">
                <el-radio :label="0">内部执行信息</el-radio>
                <el-radio :label="1">外部执行信息</el-radio>
              </el-radio-group>
            </div>
          </div>
          <el-button
            class="btn-text-blue"
            size="mini"
            icon="el-icon-printer"
            @click="print"
            >打印</el-button
          >
          <!-- <el-button
            class="btn-text-blue"
            size="mini"
            icon="el-icon-minus"
            @click="changeFont('minus')"
            >缩小</el-button
          >
          <el-button
            class="btn-text-blue"
            size="mini"
            icon="el-icon-plus"
            @click="changeFont('plus')"
            >放大</el-button
          > -->
        </div>
      </div>
      <div class="sign-table--box" ref="sign-table--box">
        <div class="form">
          <el-row
            ><div class="tableTitle">{{ title }}</div></el-row
          >
          <el-row>
            <el-col :span="6"
              ><div class="headItem" style="padding-left: 20px">
                报修单位：{{ basicData.deptId }}
              </div></el-col
            >
            <el-col :span="6"
              ><div class="headItem">
                修理类别：{{ basicData.type }}
              </div></el-col
            >
            <el-col :span="6"
              ><div class="headItem">固定资产编号：</div></el-col
            >
            <el-col :span="6"
              ><div class="headItem" style="border-right: 1px solid black">
                维修单编号：{{ basicData.code }}
              </div></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="3"
              ><div class="defect_item h64">设备编号</div></el-col
            >
            <el-col :span="5"
              ><div class="defect_item h64">
                {{ basicData.equipmentCode }}
              </div></el-col
            >
            <el-col :span="3"
              ><div class="defect_item h64">设备名称</div></el-col
            >
            <el-col :span="5"
              ><div class="defect_item h64">
                {{ basicData.equipmentName }}
              </div></el-col
            >
            <el-col :span="3"
              ><div class="defect_item h64">型号规格</div></el-col
            >
            <el-col :span="5"
              ><div class="defect_item h64">{{ basicData.model }}</div></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="3"
              ><div class="defect_item h64">制造厂家</div></el-col
            >
            <el-col :span="5"
              ><div class="defect_item h64">
                {{ basicData.manufacturer }}
              </div></el-col
            >
            <el-col :span="8"
              ><div class="defect_item h64">上次修理时间</div></el-col
            >
            <el-col :span="8"
              ><div class="defect_item h64">
                {{ basicData.beforeTime || "" }}
              </div></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="3"
              ><div class="defect_item h64">安装位置</div></el-col
            >
            <el-col :span="5"
              ><div class="defect_item h64">
                {{ basicData.equipmentLocation }}
              </div></el-col
            >
            <el-col :span="8"
              ><div class="defect_item h64">此次修理时间</div></el-col
            >
            <el-col :span="8"
              ><div class="defect_item h64">
                {{ basicData.createTime }}
              </div></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="2"
              ><div
                class="defect_item h180"
                style="padding: 30px 26px; white-space: pre-wrap"
              >
                报修原因
              </div></el-col
            >
            <el-col :span="22">
              <div class="defect_item h180">
                <el-row
                  ><div class="content">{{ basicData.desc }}</div></el-row
                >
                <el-row>
                  <el-col :span="12"
                    ><div class="contentItem">
                      报修单位负责人：{{ basicData.orgLeader }}
                    </div></el-col
                  >
                  <el-col :span="12"
                    ><div class="contentItem">
                      报修人：{{ basicData.createByName }}
                    </div></el-col
                  >
                </el-row>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <div
              class="defect_item"
              style="
                height: 40px;
                display: flex;
                line-height: 40px;
                text-align: left;
              "
            >
              <div style="flex: 1; margin-left: 80px">
                修理单位：设备维修中心
              </div>
              <div style="flex: 1">修理时间：{{ basicData.time }}</div>
            </div>
          </el-row>
          <el-row>
            <el-col :span="2"
              ><div class="defect_item h130" style="padding: 0 25px">
                修理内容及结果
              </div></el-col
            >
            <el-col :span="22"
              ><div class="defect_item context">
                <el-row>
                  <el-col :span="2">维护内容：</el-col>
                  <el-col :span="22">{{ excuteContext }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="2">验收结果：</el-col>
                  <el-col :span="22">{{ basicData.result }}</el-col>
                </el-row>
              </div></el-col
            >
          </el-row>
          <el-row>
            <div
              class="defect_item"
              style="
                height: 40px;
                display: flex;
                line-height: 40px;
                text-align: left;
              "
            >
              <div style="flex: 1; margin-left: 80px">
                维修质量是否合格（报修单位负责人签字）：{{
                  basicData.acceptName
                }}
              </div>
            </div>
          </el-row>
          <el-row>
            <el-col :span="2"
              ><div class="defect_item h300" style="padding: 0 32px 0 20px">
                修理记录
              </div></el-col
            >
            <el-col :span="22"
              ><table
                class="sign-table"
                border="1"
                cellspacing="0"
                cellpadding="0"
              >
                <tr class="sign-table--item">
                  <th class="label-width1">序号</th>
                  <th class="label-width2">配件名称</th>
                  <th class="label-width2">规格型号</th>
                  <th class="label-width1">数量</th>
                  <th class="label-width1">单位</th>
                  <th class="label-width1">单价</th>
                  <th class="label-width1">总价</th>
                  <th class="label-width3">维修地点</th>
                </tr>
                <div v-for="(item,index) in tableList" :key="index">
                  <tr class="sign-table--item">
                    <td class="label-width1">{{ item.index || "" }}</td>
                    <td class="label-width1">{{ item.partName || "" }}</td>
                    <td class="label-width1">{{ item.partModel || "" }}</td>
                    <td class="label-width1">{{ item.partNum || "" }}</td>
                    <td class="label-width1">{{ item.unit || "" }}</td>
                    <td class="label-width1">{{ item.unitPrice || "" }}</td>
                    <td class="label-width1">{{ item.totalPrice || "" }}</td>
                    <td class="label-width1">{{ item.location || "" }}</td>
                  </tr>
                </div>
              </table>
              <div
                style="
                  height: 28px;
                  line-height: 28px;
                  text-align: left;
                  padding-left: 120px;
                "
                class="defect_item"
              >
                费用合计：{{ count }}
              </div></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="2"
              ><div class="defect_item mark" style="padding: 10px 15px 0 15px">
                备注
              </div></el-col
            >
            <el-col :span="22"
              ><div
                class="defect_item mark"
                style="text-align: left; padding-left: 60px"
              >
                {{ basicData.remark }}
              </div></el-col
            >
          </el-row>
          <el-row>
            <div
              class="defect_item"
              style="
                height: 56px;
                display: flex;
                line-height: 56px;
                text-align: left;
              "
            >
              <div style="flex: 1; margin-left: 80px">
                修理单位负责人：{{ basicData.excuteLeader }}
              </div>
              <div style="flex: 1">修理人员：{{ basicData.workList }}</div>
            </div>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getWorkflowHistory } from "@/api/common.js";
export default {
  computed: {},
  data() {
    return {
      title: "",
      radio: 0,
      basicData: {},
      tableList: [{}, {}, {}, {}, {}, {}, {}, {}],
      count: 0,
      excuteContext: "",
    };
  },
  created() {
    let org = "XXXXX";
    this.title = `${org}有限公司修理设备报修记录`;
    this.init();
    /* 添加监听事件 */
    window.addEventListener("storage", this.init);
  },
  beforeDestroy() {
    /* 删除监听事件 */
    window.removeEventListener("storage", this.init);
  },
  methods: {
    async init() {
      let printData = localStorage.getItem("print-review");
      this.basicData = JSON.parse(printData);
      //this.basicData.mark = "1、高级工程师\n 2、先进工作个体";
      this.radioChange(0);
      let res = await getWorkflowHistory(this.basicData.id);
      if (res.code == 200) {
        //this.signList = res.data.workflow || [];
        let workflowData = res.data.history || [];
        workflowData.forEach((defect_item, index) => {
          if (defect_item.nowNodeName == "生产单位负责人审核") {
            this.$set(
              this.basicData,
              "orgLeader",
              defect_item.operationUserName
            );
            this.$set(
              this.basicData,
              "excuteLeader",
              defect_item.operationUserName
            );
          }
          if (defect_item.nowNodeName == "维修部门负责人审核") {
            this.$set(
              this.basicData,
              "excuteLeader",
              defect_item.operationUserName
            );
          }
        });
      }
    },
    radioChange(val) {
      let index = 0;
      // 小数点精度
      let precision = 2
      this.count = 0;
      this.excuteContext = "";
      this.tableList = [{}, {}, {}, {}, {}, {}, {}, {}];
      this.basicData.insturn.forEach((item) => {
        if (item.outDispatch == val) {
          item.orderExecutePart.forEach((part, j) => {
            part.index = index + 1;
            this.tableList.splice(index, 1, part);
            index++;
            if (part.totalPrice) {
              this.count += part.totalPrice * (10 ** precision)
            }
          });
          this.excuteContext += item.context + "\n";
        }
      });
      this.count = this.count / (10 ** precision)
    },
    operationDate(data, type) {
      let returnData = "";
      if (data) {
        if (type == "year") {
          returnData = data.substring(0, 4);
        }
        if (type == "month") {
          returnData = data.substring(5, 7);
        }
        if (type == "day") {
          returnData = data.substring(8, 10);
        }
      }
      return returnData;
    },
    print() {
      this.$print(this.$refs["sign-table--box"]);
      //window.print();
    },
  },
};
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.print-page {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #fff;
}
/* 去掉打印页面的页眉页脚 */
@page {
  size: auto A4 landscape;
  /* margin: 3mm; */
  margin: 0 1mm;
  font-size: 12px;
}

.project-header {
  width: 100%;
  position: fixed;
  border-bottom: 1px solid #b3b3b3;
  z-index: 999;
  .tools-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 1000px;
    margin: 0 auto;
    padding: 10px;
    background-color: #fff;
  }
}

.select-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1;

  .select-btn {
    font-size: 16px;
    margin: 0 20px;
  }
}
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
.sign-table--box {
  margin: 0 auto;
  padding-top: 48px;
  width: 1000px;
  height: 100%;
  overflow: hidden;
  -webkit-print-color-adjust: exact;
  -moz-print-color-adjust: exact;
  print-color-adjust: exact;
  .form {
    border-left: 1px solid black;
    border-top: 1px solid black;
    margin: 40px;
  }
}
.sign-table {
  width: 100%;
  height: 154px;
  font-size: 12px;
  font-weight: 400;
  border-top: 1px solid black;
  border-left: 0px;
}
.sign-table .sign-table--item td {
  box-sizing: border-box;
  height: 28px;
  line-height: 27px;
  text-align: center;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.sign-table .sign-table--item th {
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.tableTitle {
  height: 72px;
  line-height: 72px;
  font-size: 24px;
  text-align: center;
  border-right: 1px solid black;
}
.headItem {
  text-align: left;
  height: 32px;
  text-align: 32px;
  font-size: 12;
  font-weight: 400;
  border-bottom: 1px solid black;
}
.defect_item {
  text-align: center;
  font-size: 12px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.h32 {
  height: 40px;
  line-height: 40px;
}
.h64 {
  height: 50px;
  display: flex; /*实现垂直居中*/
  align-items: center; /*实现水平居中*/
  justify-content: center;
  text-align: justify;
}
.h130 {
  height: 150px;
  line-height: 32px;
}
.h300 {
  height: 284px;
  line-height: 56px;
}
.h180 {
  height: 200px;
  line-height: 32px;
}
.content {
  height: 160px;
  padding: 20px 0 0px 10px;
  text-align: left;
  text-indent: 28px;
}
.context {
  height: 150px;
  text-align: left;
  padding-left: 38px;
  padding-top: 20px;
  white-space: pre-wrap;
}
.mark {
  height: 60px;
  line-height: 32px;
}
.contentItem {
  height: 30px;
  text-align: left;
  margin-left: 10px;
}
.sign-table-title {
  /* font-size: 32px;
    text-align: center;
		line-height: 72px; */
}
.font-bold {
  font-weight: bold;
}
.top_left {
  font-size: 12px;
  margin: 10px auto;
}
.signBtn {
  /* background-color: #1f69e0 ; */
  color: #1f69e0;
  border-color: #1f69e0;
  height: 30px;
  padding: 0px 20px;
}
.btnLine {
  padding: 10px;
  margin-right: 95px;
  float: right;
}
.userItem + .userItem {
  margin-left: 20px;
}
.right-btn {
  position: relative;
  text-align: right;
  margin-right: 60px;
}
.opinion-text {
  /* min-height: 78px; */
  text-align: left;
  padding: 10px 20px;
}
.accept {
  height: 48px;
  line-height: 48px;
  border: 1px solid black;
}
.label-width1 {
  width: 10%;
}
.label-width2 {
  width: 15;
}
.label-width3 {
  width: 20;
}
</style>
